<template>
  <el-form :model="form" label-width="auto" style="width: 50%">
    <el-form-item label="协议">
      <el-select
        v-model="form.protocol"
        placeholder="protocol"
        style="width: 500px"
      >
        <el-option label="https(支持)" value="https" />
        <el-option label="http" value="http" />
      </el-select>
    </el-form-item>
    <el-form-item label="支付宝网关地址">
      <el-input
        v-model="form.gatewayHost"
        placeholder="getewayhost"
        style="width: 500px"
        disabled
      />
    </el-form-item>
    <el-form-item label="签名类型">
      <el-select
        v-model="form.signType"
        placeholder="sign-type"
        style="width: 500px"
      >
        <el-option label="RSA2" value="RSA2" />
      </el-select>
    </el-form-item>
    <el-form-item label="app-id">
      <el-input v-model="form.appId" placeholder="APPID" style="width: 500px" />
    </el-form-item>
    <el-form-item label="私钥">
      <el-input
        v-model="form.appPrivateKey"
        placeholder="app-private-key"
        type="textarea"
        :rows="20"
        style="width: 500px"
      />
    </el-form-item>
    <el-form-item label="公钥">
      <el-input
        v-model="form.appPublicKey"
        placeholder="app-public-key"
        type="textarea"
        :rows="8"
        style="width: 500px"
      />
    </el-form-item>
    <el-form-item label="回调地址">
      <el-input
        v-model="form.notifyUrl"
        placeholder="notify-url"
        style="width: 500px"
      />
    </el-form-item>
    <el-form-item label="返回地址">
      <el-input
        v-model="form.returnUrl"
        placeholder="成功返回地址"
        style="width: 500px"
      />
    </el-form-item>
    <!-- <el-form-item label="是否开启支付宝支付">
      <el-radio-group v-model="form.isAlipay">
        <el-radio value="1">是</el-radio>
        <el-radio value="0">否</el-radio>
      </el-radio-group>
    </el-form-item> -->

    <el-form-item>
      <el-button type="success" @click="onSubmit" plain>保存</el-button>
      <el-button type="info" @click="getAlipaySetting" plain>取消</el-button>
      <div style="margin-left: 20px">
        <a href="https://open.alipay.com/" style="color: #4781ff">
          不清楚？前往获取
        </a>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits(["submit"]);
const form = ref({
  id: props.data?.id,
  protocol: props.data?.protocol || "https",
  gatewayHost: props.data?.gatewayHost,
  notifyUrl: props.data?.notifyUrl,
  appPublicKey: props.data?.publicKey,
  appPrivateKey: props.data?.privateKey,
  appId: props.data?.appId,
  signType: props.data?.signType || "RSA2",
  returnUrl: props.data?.returnUrl,
});

console.log(form.value, props.data);

const onSubmit = () => {
  emits("submit", form.value);
};
</script>

<style scoped></style>
